<script setup lang="ts">
import 'element-plus/es/components/notification/style/css';
import 'element-plus/es/components/message/style/css'

import { ElMessage, ElNotification } from 'element-plus';


const open1 = () => {
  ElNotification({
    title: 'Success',
    message: 'This is a success message',
    type: 'success',
    duration:30000
  })
}
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
</script>

<template>
  <div>
  <el-button plain @click="open1"> Success </el-button>
  <el-button :plain="true" @click="open2">success</el-button>

    <p>For example, we can custom primary color to 'green'.</p>

    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test components.
    </p>
    <p>
      Edit
      <code>styles/element/var.scss</code> to test scss variables.
    </p>

    <p>
      Full Example:
      <a
        href="https://github.com/element-plus/element-plus-vite-starter"
        target="_blank"
      >element-plus-vite-starter</a>
      | On demand Example:
      <a
        href="https://github.com/element-plus/unplugin-element-plus"
        target="_blank"
      >unplugin-element-plus/examples/vite</a>
    </p>
  </div>
</template>
